<template>
    <div>
        <el-dialog v-model="dialogFormVisible" :title="title">
            <el-form ref="ruleFormRef" :model="form" :inline="true" label-width="120px" class="demo-ruleForm"
                :size="formSize" status-icon>
                <el-form-item label="学生编号：" prop="code" :rules="[{ required: true, message: '请输入学生编号', trigger: 'blur' },
                { min: 4, message: '长度不能少于四位', trigger: 'blur' }]">
                    <el-input v-model="form.code" />
                </el-form-item>
                <el-form-item label="学生姓名：" prop="name" :rules="[{ required: true, message: '请输入学生姓名', trigger: 'blur' }]">
                    <el-input v-model="form.name" />
                </el-form-item>

                <el-form-item label="所在院系：" prop="department" :rules="{
                    required: true,
                    message: '授课院系不能为空',
                    trigger: 'change',
                }">
                    <el-select v-model="form.department" placeholder="请选择" @change="chooseClass()">
                        <el-option :label="item.department" :value="item.id" v-for="(item, index) in departmentList"
                            :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所在班级：" prop="classes1" :rules="{
                    required: true,
                    message: '授课班级不能为空',
                    trigger: 'change',
                }">
                    <el-select v-model="form.classes1" filterable placeholder="请选择/输入">
                        <el-option :label="item.class_title" :value="item.id" v-for="(item, index) in classesList"
                            :key="index"></el-option>
                    </el-select>
                </el-form-item>


                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">提交
                    </el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { departmentDepartmentList, departmentClassesList } from '../../../request/api'
import { DepartmentListtype } from '~/type/login';
import userMainStore from "../../../store/modules/app";
const mainStore = userMainStore();
import { CirclePlus, Remove } from '@element-plus/icons-vue';
const emit = defineEmits(["sayHello"]) //放外部，不然会报错  error submit! ReferenceError: defineEmits is not defined


const props = defineProps({
    title: {
        default: '',
        type: String,
    },
})

const dialogFormVisible = ref(false)

interface RuleForm {
    code: string,
    name: string,
    department: string,
    classes1: string,
}
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const form = reactive<RuleForm>({
    code: '',
    name: '',
    department: '',
    classes1: ''
})


let departmentList = ref([] as any[])
let classesList = ref([] as any[])
const chooseClass = () => {

    classesList.value = []
    form.classes1 = ''

    classes()

}
const classes = () => {
    let params = {
        token: mainStore.Authorization,
        limit: 1000,
        department: form.department

    };
    departmentClassesList(params).then((res) => {
        let { data, code } = res;
        if (code == 200) {
            classesList.value = data.list
            console.log(form, 'form11111');
        }
    });
}

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            // console.log('submit!')
            // 获取值
            console.log(form, 'form')

            // 子组件调用父组件中的方法  刷新列表

            emit('sayHello')

        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
const showDio1 = () => {
    dialogFormVisible.value = true
}
const department = () => {
    let params: DepartmentListtype = {
        token: mainStore.Authorization,
        limit: 1000,
        page: 1

    };
    departmentDepartmentList(params).then((res) => {
        let { data, code } = res;
        if (code == 200) {
            departmentList.value = data.list


        }
    });
}
// 第二部：暴露方法
defineExpose({
    showDio1
})
onMounted(() => {
    department()
})
</script>

<style scoped></style>